    <style type="text/css" title="text/css">
    <!--
        body
        {
            color: black;
            background-color: white;
            font-family: helvetica, arial, sans-serif;
        }
        
        .imageViewer
        {
            position: relative;
            top: 0;
            left: 0;
            width: 1024px;
            height: 768px;
        }
        
        .imageViewer .well, .imageViewer .surface
        {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: default;
            border: 1px solid black;
        }
        
        .imageViewer .well
        {
            background-color: gray;
            background-image: url("null/none.png");
            overflow: hidden;
        }
        
        .imageViewer .surface        
        {
            background-color: transparent;
            background-image: url("center.gif");
            background-repeat: no-repeat;
            background-position: center center;
        }
        
        .imageViewer .status
        {
            margin: 0;
            padding: 0;
            position: absolute;
            top: 480px;
            left: 0px;
            display: none;
        }
        
            .imageViewer .well .tile
            {
                border: 0;
                margin: 0;
                padding: 0;
                position: absolute;
                top: 0px;
                left: 0px;
                display: block;
            }
            
        .imageViewer .zoom        
        {
            background-color: white;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 48px;
            height: 20px;
            margin: 0;
            padding: 0 0 0 4px;
            font-size: 20px;
            line-height: 20px;
            font-weight: bold;
            border-left: 1px solid black;
            border-top: 1px solid black;
        }
        
            .imageViewer .zoom a
            {
                text-decoration: none;
            }
        
            .imageViewer .zoom .dump
            {
                font-size: 16px;
            }
        
        h1, .description
        {
            margin-left: 100px;
            width: 400px;
        }
        
        h1
        {
            margin-top: 40px;
        }
        
            h1 em
            {
                font-size: 50%;
                color: gray;
            }
        
    -->
    </style>

<script src=gsv.js></script>
 <input type="text" size=6 id="mapType" value="tbmap">
 <input type="text" size=100 id="rootPath" value="test-gmap-gen/atlases/20080717_141107">
 <input type="text" size=20 id="mapName" value="montreal">
  <input type="Submit" value="Go !" onclick="map_update();">
   <div class="imageViewer" id="imageViewer">
        <div class="well"> </div>
        <div class="surface"> </div>
        <p class="status"> </p>
        <p class="zoom">
            <a class="up" href="#">+</a>
            <a class="down" href="#">-</a>
            <a class="dump" href="#">?</a>
        </p>

    </div>

<script>
        var rootPath = document.getElementById('rootPath').value;
        Behaviour.register({
            '.imageViewer' : function(el) {
                prepareViewer(el, rootPath, 256);
            },
            '.imageViewer .zoom .up' : function(el) {
                el.onclick = function() {
                    zoomImageUp(el.parentNode.parentNode, undefined);
                    return false;
                }
            },
            '.imageViewer .zoom .down' : function(el) {
                el.onclick = function() {
                    zoomImageDown(el.parentNode.parentNode, undefined);
                    return false;
                }
            },
            '.imageViewer .zoom .dump' : function(el) {
                el.onclick = function() {
                    dumpInfo(el.parentNode.parentNode);
                    return false;
                }
            }
        });

function map_update(){
        var rootPath = document.getElementById('rootPath').value;
        var type = document.getElementById('mapType').value;
        var name = document.getElementById('mapName').value;

        var map = document.getElementById('imageViewer');
        var d = map.dimensions;
        d.mapType = type;
        d.mapName = name;
        d.tileDir = rootPath;
        //find a way to update maps 
        positionTiles(map, {'x': 0, 'y': 0});
}

setTimeout("map_update()",300);
</script>
